{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎浏览JianShuBlog</title>
</head>
<body>
<html><!--<![endif]--><head>

  <link rel="stylesheet" media="all" href="//cdn2.jianshu.io/assets/web-09ed578c92dce670ddb2.css">

    <link rel="stylesheet" href="//at.alicdn.com/t/font_2065506_fo8zxjxo1yh.css">

    <link rel="stylesheet" href="//at.alicdn.com/t/font_2065515_4mqjpn2gdtf.css">


  <link rel="stylesheet" media="all" href="//cdn2.jianshu.io/assets/web/pages/common/signup/entry-f3121f603b4ede1d27bc.css">

  <link href="//cdn2.jianshu.io/assets/favicons/favicon-e743bfb1821442341c3ab15bdbe804f7ad97676bd07a770ccc9483473aa76f06.ico" rel="shortcut icon" type="image/x-icon">
      <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/57-a6f1f1ee62ace44f6dc2f6a08575abd3c3b163288881c78dd8d75247682a4b27.png" sizes="57x57">
      <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/72-fb9834bcfce738fd7b9c5e31363e79443e09a81a8e931170b58bc815387c1562.png" sizes="72x72">
      <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/76-49d88e539ff2489475d603994988d871219141ecaa0b1a7a9a1914f4fe3182d6.png" sizes="76x76">
      <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/114-24252fe693524ed3a9d0905e49bff3cbd0228f25a320aa09053c2ebb4955de97.png" sizes="114x114">
      <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/120-1bb7371f5e87f93ce780a5f1a05ff1b176828ee0d1d130e768575918a2e05834.png" sizes="120x120">
      <link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/152-bf209460fc1c17bfd3e2b84c8e758bc11ca3e570fd411c3bbd84149b97453b99.png" sizes="152x152">



  <!-- End of 访问统计 -->
<link rel="preload" href="https://adservice.google.com/adsid/integrator.js?domain=www.jianshu.com" as="script">
<link src="{% static 'css/jianshucss.css' %}" rel="stylesheet"></head>



<body class="no-padding reader-black-font" lang="zh-CN">
  <div class="sign">
    <div class="logo"><a href="/"><img src="//cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png" alt="Logo"></a></div>
    <div class="main">


<h4 class="title">
  <div class="normal-title">
    <a class="" href="/sign_in">登录</a>
    <b>·</b>
    <a id="js-sign-up-btn" class="active" href="/sign_up">注册</a>
  </div>
</h4>
        <div id="message"></div>

  <div class="js-sign-up-container">
    <form class="new_user" id="new_user" action="save/" accept-charset="UTF-8" method="get">
        <div class="input-prepend restyle">
          <input placeholder="输入昵称" type="text" name="username" id="username">
        <i class="iconfont ic-user"></i>
        </div>
        <div class="input-prepend restyle no-radius js-normal">
            <input placeholder="手机号" type="tel" name="phone" id="phone">
          <i class="iconfont ic-phonenumber"></i>
        </div>
        <div class="input-prepend">
            <input placeholder="设置密码" type="password" name="password" id="pwd-1">
           <i class="iconfont ic-password"></i>
        </div>
        <div class="input-prepend">
            <input placeholder="确认密码" type="password" name="password2" id="pwd-2" >
           <i class="iconfont icon-icons-"></i>
        </div>
        <div class="input-prepend restyle no-radius js-normal">
            <input placeholder="邮箱" type="email" name="email" id="email">
            <button type="button" class="check_email_button" id="check_email_button">获取验证码</button>
            <i class="iconfont icon-email1"></i>
        </div>
        <div>
            <div class="input-prepend restyle no-radius js-normal">
                <input placeholder="邮箱验证码" type="text" name="checkemail" id="checkemail">
            </div>
        </div>
      <input type="button" name="commit" value="注册" class="sign-up-button" id="sign-up-button">
	  <p class="sign-up-msg">点击 “注册” 即表示您同意并愿意遵守简书<br> <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a> 和 <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。</p>
    </form>
    <!-- 更多注册方式 -->
    <div class="more-sign">
      <h6>欢迎注册JianShuBlog</h6>
    </div>
  </div>

    </div>
  </div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>
    $(function () {
        $('input').attr('autocomplete','off');
        $('#sign-up-button').click(function () {

            if(check()){
                $('#new_user').submit()
            }
        });

        $('#username').blur(function () {
            const name = $('#username').val();
            $.ajax({
                 url:'check_username',
                 type: "get",
                 success:function (data) {
                     if(data.result!='ok'){
                         $('#message').text('用户名['+name+']已经被注册');
                         $('#username').val()
                     }else {
                         $('#message').text()
                     }
                 }
            })
        });

        let check_data = '';
        $(".check_email_button").click(function () {
            $('#message').text('');

            if($('#email').val()== null ) {
                $("#message").text("该处输入不能为空");
                $('#message').text('请输入' + $('#email').attr('placeholder'));
                return false
            }
            else
            {
                const  email_val = $ ('#email').val();
                $.ajax(
                    {
                        url:'check_email?email='+email_val,
                        type:"GET",
                        success:function (data) {
                            check_data = data.check;
                            console.log(check_data)

                        }
                    }
                );
            }

        });
        function check(){
            {#debugger#}
            $('.input-prepend input').each(function () {
                if($('this').val() == ''){
                    $('#message').text('请输入' + $(this).attr('placeholder'));
                    return false
                }
            });
            if(!checkphone($('#phone').val())){
                $('#message').text('手机号码格式不正确');
                return false
            }
            if($('#pwd-1').val() != $('#pwd-2').val()){
                $('#message').text('两次密码输入不一致');
                return false
            }
            return true
        }
        function checkphone(phone){
            const pattern =/^1[3456789]\d{9}$/;
            return pattern.test(phone);
        }
    })
</script>